<template>
  <view class="transfer-violation-wrapper">
    <ve-form ref="veFormRef" :model="form" :rules="rules">
      <ve-card>
        <ve-form-item label="解冻金额" prop="thawAmount" required unit="元">
          <ve-input-number v-model="form.thawAmount" :max="thawAmountMax" :precision="2" />
        </ve-form-item>
        <ve-form-item label="剩余冻结金额">{{ freezeAmount }} 元</ve-form-item>
        <ve-form-item label="剩余金额冻结时长">{{ `${freezeDay} 天` }}</ve-form-item>
        <ve-form-item label="预计解冻日期">{{ planThawTime }}</ve-form-item>
        <ve-form-item label="备注" labelPosition="top" :borderBottom="false">
          <ve-input type="textarea" v-model="form.remark" placeholder="请输入备注说明" :maxlength="200" />
        </ve-form-item>
      </ve-card>
    </ve-form>
    <ve-bottom-box size="mini">
      <ve-button type="primary" size="long" :loading="okLoading" @click="onConfirm">确认</ve-button>
    </ve-bottom-box>
  </view>
</template>
<script setup>
  import { ref, computed } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { changeDeposit } from '@/api/order/sOrder'
  import { decimalSubtract } from '@/utils/index'
  import useToast from '@/hooks/useToast'

  const props = defineProps({
    // 租车押金id
    carDepositId: [String, Number],
    // 可用金额
    avaliableAmount: Number,
    // 应收金额
    receiveAmount: Number,
    // 冻结天数
    freezeDay: Number,
    // 预计解冻日期
    planThawTime: String,
  })

  // 解冻金额最大值
  // 当前可用金额 - 0.01
  const thawAmountMax = computed(() => {
    return decimalSubtract(props.avaliableAmount, 0.01)
  })

  const form = ref({
    thawAmount: 0,
  })

  const rules = ref({
    thawAmount: {
      required: true,
      message: '请输入解冻金额',
    },
  })

  onLoad(() => {
    // 默认解冻金额 可用减去应收
    if (props.avaliableAmount > props.receiveAmount) {
      form.value.thawAmount = decimalSubtract(props.avaliableAmount, props.receiveAmount)
    }
  })

  // 剩余冻结金额
  const freezeAmount = computed(() => {
    const totalAmount = props.avaliableAmount
    const thawAmount = form.value.thawAmount

    return decimalSubtract(totalAmount, thawAmount)
  })

  const okLoading = ref(false)
  const veFormRef = ref(null)
  const onConfirm = () => {
    okLoading.value = true
    veFormRef.value.validate((valid) => {
      if (valid) {
        changeDeposit({
          // 租车押金id
          id: props.carDepositId,
          thawAmount: form.value.thawAmount,
          remark: form.value.remark,
        })
          .then(() => {
            useToast({
              title: '操作成功',
              duration: 1500,
            }).then(() => {
              uni.navigateBack()
              // 告知上一页面刷新数据
              uni.$emit('refreshData')
            })
          })
          .catch(() => {
            okLoading.value = false
          })
      } else {
        okLoading.value = false
      }
    })
  }
</script>
<style lang="less" scoped>
  .transfer-violation-wrapper {
    background: #f7f8fa;
    padding: 24rpx;
    height: 100%;
  }
</style>
